<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>媒体评分系统</title>
		<link rel="stylesheet" type="text/css" href="css/fontello-embedded.css"/>
	    <link rel="stylesheet" type="text/css" href="css/common.css"/>
	</head>
	<body>
		
		 <div class="username">
						 <div class="logo" >
			 	           	  <img src="images/logo2.png" alt="prime-research">
			 	           </div>
		 	   
							<div class="mesg">
								<span>
									<i class="demo-icon icon-user"></i>
									欢迎你，外国人小姐
								</span>
								<a href="#" id="logout">
									安全退出<i class="demo-icon icon-logout"></i>
								</a>
							</div>
						
		 </div>
		
		<div class="main" >
				<div class="left show" >
					<div class="menuContainer" >
					   <ul class="ulList">
					   	<div class="title">媒体评分系统</div>
					   	<li>
					   		<a href="index.html">
					   			<i class="demo-icon icon-pencil"></i>评分列表
					   		</a>
					   	</li>
					   	<li>
					   		<a href="media.html" >
					   			<i class="demo-icon icon-chrome"></i>媒体列表
					   		</a>
					   	</li>
					   		<li>
					   		<a href="data.html" class="active">
					   			<i class="demo-icon icon-chrome"></i>数据管理
					   		</a>
					   	</li>
					   </ul>	
					</div>
				</div>
				
				<div class="right" >
				   <!--页面导航-->
				   <div class="nav">
				   	  <span data-value="0" class="navspan nav-active">数据上传</span>
				   	  <span data-value="1" class="navspan">项目列表</span>
				   </div>
				   
				   
				   <!--数据上传-->
				   <div class="data-table">
				   	  <table border="1" >
				   	  	<tr>
				   	  		<td class="name-td">项目名称</td>
				   	  		<td class="item-td">汽车之家</td>
				   	  	</tr>
				   	  	<tr >
				   	  		<td class="name-td">数据上传</td>
				   	  		<td class="item-td">
				   	  			<div class="file-box">
									<form action="" method="" enctype="multipart/form-data">
										<input type='text'   class='txt' />
										<input type='button' class='btn' value='浏览...' />
										<input type="file"  class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
										<input type="submit"  class="btn" value="上传" />
									</form>
								</div>
				   	  		</td>
				   	  	</tr>
				   	  	<tr>
				   	  		<td class="name-td">数据上传模板下载</td>
				   	  		<td class="item-td">
				   	  			<a href="#" class="download">下载1</a>
				   	  			<a href="#" class="download">下载2</a>
				   	  			<a href="#" class="download">下载3</a>
				   	  			<a href="#" class="download">下载4</a>
				   	  		</td>
				   	  	</tr>
				   	  </table>
				   	 
				   	 
				   </div>
				   
				   <!--项目列表-->
				   <div class="table-list" style="display: none;">
				   	  <table border="1">
				   	  	<tr>
				   	  		<th title="......">
				   	  			项目1
				   	  		</th>
				   	  		<th title="......">
				   	  			项目2
				   	  		</th>
				   	  		<th title="......">
				   	  			项目3
				   	  		</th>
				   	  		<th title="......">
				   	  			项目4
				   	  		</th>
				   	  		<th title="......">
				   	  			项目5
				   	  		</th>
				   	  		
				   	  	</tr>
				   	  	<tr>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  	</tr>
				   	  	<tr>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  	</tr>
				   	  	<tr>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  	</tr>
				   	  	<tr>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  	</tr>
				   	  	<tr>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  	</tr>
				   	  	<tr>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  	</tr>
				   	  	<tr>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  	</tr>
				   	  	<tr>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  	</tr>
				   	  	<tr>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  	</tr>
				   	  	<tr>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  		<td>Data</td>
				   	  	</tr>
				   	  </table>
				   	  
				   	  <div class="page">
				   	  	 <a  class="pagea page-active">1</a>
				   	  	 <a  class="pagea">2</a>
				   	  	 <a  class="pagea">3</a>
				   	  	 <a  class="pagea">4</a>
				   	  </div>
				   </div><!--table-list end-->
					
					
					
					
					
				</div><!--right end-->
			
		</div><!--main end-->
		
		
		<!--覆盖层-->
	
			<div id="msg" class="alertHide">
			<div class="alertHint">
				<div class="alertTitle"><span>提示信息</span></div>
			    <div class="alertDelete"><span id="calIcon">取消</span></div>
			    <div style="clear: both;"></div>
			</div>
			<div class="alertContent">
				<span>(ง •̀_•́)ง确定删除吗...</span>
			</div>
			<div class="alertBtns">
				<button class="buttonStyle" id="alertSureBtn">确定</button>
				<button class="buttonStyle" id="alertCalBtn">取消</button>
			</div>
		  </div><!--msg end-->
	
		
		
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript">
		
		    //菜单栏选中样式
		    $(".ulList>li>a").each(function(){
		    	this.onclick = function(){
		    		$(this).addClass("active");
		    		$(this).parent().siblings().find("a").removeClass("active");
		    	}
		    })
		    
		    //分页选中样式
		    $(".pagea").each(function(){
		    	this.onclick =function(){
		    		$(this).addClass("page-active");
		    		$(this).siblings().removeClass("page-active");
		    	}
		    })
			
			//安全退出
			$("#logout").bind("click",function(){
		  	     $("#msg").removeClass("alertHide").addClass("alertShow");
		  	     $(".alertContent>span").html("(ง •̀_•́)ง确定退出吗...");
		     })
		  
		  $("#alertSureBtn,#alertCalBtn,#calIcon").bind("click",function(){
		  	 $("#msg").removeClass("alertShow").addClass("alertHide");
		  })
		    
		    //导航选择
		    $(".navspan").each(function(){
		    	this.onclick= function(){
		    		var value = $(this).attr("data-value");
		    		if(value == 0){
		    			$(".data-table").css("display","block");
		    			$(".table-list").css("display","none");
		    			
		    			$(this).removeClass("nav-normal").addClass("nav-active");
		    			$(this).siblings().removeClass("nav-active").addClass("nav-normal");
		    		}
		    		
		    	    else{
		    			$(".data-table").css("display","none");
		    			$(".table-list").css("display","block");
		    			$(this).removeClass("nav-normal").addClass("nav-active");
		    			$(this).siblings().removeClass("nav-active").addClass("nav-normal");
		    		}
		    	}
		    })
		    
		    
		</script>
	</body>
</html>
